<template>
	<view class="bigbox">
		<view class="bigh1">
			<view class="search-h1">
				<image src="../static/image/iocn-fangdajing.png" mode=""></image>
				<input type="text" placeholder="搜索基金" v-model="keywords" @input="setSearch()"
					@blur="setHistorySearch(keywords)" placeholder-class="fs-24" focus="true" />
			</view>
			<text @tap="remove">取消</text>
		</view>
		<view class="blankSearch" v-if="!keywords">
			<view class="hot">
				<view class="title">
					热门搜索
				</view>
				<view class="item-box">
					<view class="item-s" v-for="i in hotSearch" :key="i" @tap="keywords=i,setSearch()">{{i}}</view>
				</view>
			</view>
			<view class="hot">
				<view class="title">历史搜索</view>
				<view class="item-box">
					<view class="item-s" v-for="i in hsd" :key="i" @tap="i=keywords,setSearch()">{{i}}</view>
				</view>
			</view>
		</view>


		<view class="" v-else-if="arr.length">
			<view>
				<view class="search-h2 justify-between">
					<text v-for="(kl,index) in classfly" :key="kl.l" :class="{'tcolor':index==indexs}"
						@tap="qiehuan(index)">
						{{kl.title}}
					</text>
				</view>
				<swiper @change="huadong" class="swipers" :interval="1000" :duration="1000" :current="indexs"
					style="height: calc(100vh-100rpx);">
					<swiper-item>
						<scroll-view scroll-y="true" style="height: 100%;">
							<view class="swiper-item">
								<view class="i-box" v-for="k in arr" :key="k.code">
									<text class="b-h1 text-cut">{{k.name}}({{k.code}})</text>
									<view class="b-h2">
										<view class="b-h2-l">
											<view class="l-1">
												<text class="h2-t-1" :class="[k.dayGrowth<0? 'text-green':'text-red' ]">{{k.dayGrowth}}%</text>
												<text class="h2-t-2">日涨跌幅</text>
											</view>
											<view class="l-2">
												<text class="h2-t-1" :class="[k.lastYearGrowth<0? 'text-green':'text-red' ]">{{k.lastYearGrowth}}%</text>
												<text class="h2-t-2">近一年收益率</text>
											</view>
										</view>
										<navigator :url="'../../pagesA/t-fundDetail/t-fundDetail?code='+k.code">
											<view class="b-h2-r">
												<button class="r-button" type="default">买入</button>
											</view>
										</navigator>
									</view>
									<view class="b-h3">
										<view class="h3-box1">中高风险</view>
										<view class="h3-box2">{{k.fundType}}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>

					<swiper-item>
						<scroll-view scroll-y="true" style="height: 100%;">
							<view class="swiper-item">
								<view class="i-box" v-for="k in arr" :key="k.code">
									<text class="b-h1">{{k.name}}({{k.code}})</text>
									<view class="b-h2">
										<view class="b-h2-l">
											<view class="l-1">
												<text class="h2-t-1">{{k.dayGrowth}}%</text>
												<text class="h2-t-2">日涨跌幅</text>
											</view>
											<view class="l-2">
												<text class="h2-t-1">{{k.lastYearGrowth}}%</text>
												<text class="h2-t-2">近一年收益率</text>
											</view>
										</view>
										<view class="b-h2-r">
											<button class="r-button" type="default">买入</button>
										</view>
									</view>
									<view class="b-h3">
										<view class="h3-box1">中高风险</view>
										<view class="h3-box2">{{k.fundType}}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>

				</swiper>
			</view>


		</view>
		<view v-else class="text-lg text-center margin-top-lg ">抱歉！系统暂无该基金数据，你可以搜索其他看看 </view>

	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapMutations,
		mapState

	} = createNamespacedHelpers('product')
	export default {
		data() {
			return {
				keywords: "",
				searchText: "",
				arr: [],
				classfly: [{
						"title": "综合"
					},
					{
						"title": "基金"
					},
					{
						"title": "股票"
					},
					{
						"title": "内容"
					},
				],
				indexs: 0,
				hotSearch: ['能源', '易方达', '招商银行'],
				historySearch: []


			}
		},
		computed: {
			...mapState(['hsd'])
		},
		methods: {
			...mapActions(['getSearch']),
			...mapMutations(['setHistorySearch']),
			goSearch() {
				this.search(this.keywords)
			},
			qiehuan(a) {
				this.indexs = a
			},
			huadong(e) {
				this.indexs = e.detail.current
			},
			remove() {
				console.log(this.keywords)
				this.keywords = ""
			},
			

			async setSearch() {
				this.arr = await this.getSearch({
					name: this.keywords
				})
				// console.log(this.arr)
			}

		},
		onLoad() {

		}
	}
</script>

<style scoped lang="scss">
	.blankSearch {

		// padding: 0 40rpx;
		.hot {
			.title {
				font-weight: bold;
				font-size: 32rpx;
				padding: 30rpx 0;
			}

			.item-box {
				display: flex;
				flex-wrap: wrap;

				.item-s {
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 35rpx;
					margin-right: 30rpx;
					text-align: center;
					border-radius: 30rpx;
					background-color: rgba(238, 238, 238, 1);
				}
			}

		}
	}

	.bigbox {
		width: 670rpx;
		margin: 0 auto;
		padding-top: 20rpx;
	}

	.bigh1 {
		display: flex;
		justify-content: space-between;
		width: 670rpx;
		line-height: 70rpx;
		/* font-weight: bold; */
		font-size: 28rpx;
		margin-bottom: 30rpx;
	}

	.search-h1 {
		height: 70rpx;
		width: 570rpx;
		background-color: rgba(238, 238, 238, 1);
		border-radius: 30rpx;
		box-sizing: border-box;
		padding: 10rpx;
		display: flex;

	}

	.search-h1 image {
		width: 50rpx;
		height: 50rpx;
	}

	.search-h1 input {
		width: 450rpx;
		height: 50rpx;
		line-height: 50rpx;
		/* border-right: 1rpx solid; */
	}

	.search-h2 {
		width: 670rpx;

		display: flex;
		margin-bottom: 50rpx;
	}

	.search-h2 text {
		font-size: 32rpx;
		/* font-weight: bolder; */

		/* margin-left: 50rpx; */
	}

	.tcolor {
		display: block;
		/* color: blue; */
		font-weight: bold;
		border-bottom: 7rpx solid orange;
	}

	.swipers {
		width: 670rpx;
		height: calc(100vh - 70rpx);
		margin: 0 auto;
	}

	.swiper-item {
		width: 670rpx;
		height: 1000rpx;
		margin: 0 auto;
	}

	.i-box {
		width: 670rpx;
		border-bottom: 1rpx solid gray;
		height: 270rpx;
	}

	.b-h1 {
		width: 670rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 32rpx;
		display: block;
		font-weight: bolder;
		color: black;
	}

	.b-h2 {
		width: 670;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.b-h2-l {
		width: 450rpx;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
	}

	.h2-t-1 {
		// color: red;
		font-size: 40rpx;
		display: block;
		margin-bottom: 20rpx;
	}

	.h2-t-2 {
		color: gray;
		font-size: 32rpx;

	}

	.r-button {
		background-color: #007AFF;
		width: 150rpx;
		display: block;
		line-height: 60rpx;
		color: white;
		text-align: center;
		margin-top: 30rpx;
		height: 60rpx;
		border-radius: 30rpx;
	}

	.b-h3 {
		height: 50rpx;
		display: flex;
	}

	.h3-box1 {
		background-color: #F8F7F7;
		display: block;
		height: 50rpx;
		line-height: 50rpx;
		color: #F0AD4E;
	}

	.h3-box2 {
		display: block;
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 20rpx;
		color: #007AFF;
	}
</style>
